<template>
	<view class="content">
		<view class="device-view">
			 <view class="alarm-view-item">
				<uni-row class="rowContent">
					<image 	:span="5" class="image" src="../../static/icon/fishing/dianyuan.png" style="width: 25px;height: 25px;float: left;margin-right: 10px;"/>
					<uni-col :span="4" style="line-height: 30px;">总闸：</uni-col>
					<uni-col :span="14"><switch checked color="#30D39C" style="transform: scale(0.7);"/></uni-col>
				</uni-row>
			 </view>
			 <view class="alarm-view-item">
				<uni-row class="rowContent">
					<image 	:span="5" class="image" src="../../static/icon/fishing/zhaomin.png" style="width: 25px;height: 25px;float: left;margin-right: 10px;"/>
					<uni-col :span="4" style="line-height: 30px;">照明灯：</uni-col>
					<uni-col :span="14"><switch color="#30D39C" style="transform: scale(0.7)"/></uni-col>
				</uni-row>
			 </view>
			 <view class="alarm-view-item">
				 <uni-row class="rowContent">
				 	<image :span="5" class="image" src="../../static/icon/fishing/fwd.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
				 <uni-col :span="4" style="line-height: 30px;">氛围灯：</uni-col>
				 <uni-col :span="14"><switch color="#30D39C" style="transform: scale(0.7)"/></uni-col>
				 </uni-row>
			 </view>
			 <view class="alarm-view-item">
			 	<uni-row class="rowContent">
			 		<image :span="5" class="image" src="../../static/icon/fishing/kongtiao.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
			 		<uni-col :span="4" style="line-height: 30px;">空调：</uni-col>
			 		<uni-col :span="14"><switch color="#30D39C" style="transform: scale(0.7)"/></uni-col>
			 	</uni-row>
			 </view>
			 <view class="alarm-view-item">
			 	<uni-row class="rowContent">
			 		<image :span="5" class="image" src="../../static/icon/fishing/binxiang.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
					<uni-col :span="4" style="line-height: 30px;">冰箱：</uni-col>
					<uni-col :span="14"><switch color="#30D39C" style="transform: scale(0.7)"/></uni-col>
			 	</uni-row>
			 </view>
			 <view class="alarm-view-item">
			 	<uni-row class="rowContent">
			 		<image :span="5" class="image" src="../../static/icon/fishing/men.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
					<uni-col :span="4" style="line-height: 30px;">门禁：</uni-col>
					<uni-col :span="14"><switch color="#30D39C" style="transform: scale(0.7)"/></uni-col>
			 	</uni-row>
			 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				form: {},
				lotData:{},
				productTypeDatas:[],
				responAlarmTaskList: [],
				queryForm:{
					imei:null,
					responUserId: uni.getStorageSync('userInfo').userId
				},
			}
		},
		onShow(){
			this.getDetail();
			this.$http.getDicts("PRODUCT_TYPE").then(res => {
				this.productTypeDatas = res.data
			});
		},
		onLoad(options) {
			this.id = options.id;
			this.devbm = options.devbm
		},
		onPullDownRefresh() {
			this.getDetail();	
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			onNavigationBarButtonTap(e) {
				let _this = this
				uni.showActionSheet({
					itemList: ['编辑', '删除'],
					success: function (res) {
						if(res.tapIndex == 0){
							uni.navigateTo({
								url: '/pages/manholeCover/edit?id=' + _this.id
							})
						}else if(res.tapIndex == 1){
							uni.showModal({
								title: "提示",
								content: "确认删除此设备吗?",
								cancelText: "取消",
								confirmText: "确定",
								success: res => {
									if (res.confirm) {
										del(_this.id).then((res) => {
											uni.navigateBack()
										})
									}
								}
							})
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});	
			},
			//获取消息明细消息
			getDetail: function() {
				getDetail(this.id).then((res) => {
					if (res.code == 200) {
						this.form = res.data;
						this.queryForm.imei = res.data.deviceNo;
						this.getLotNode(res.data.deviceNo);
						this.loadAlarmList();
					} else {
						uni.showToast({
							icon: 'none',
							title: "获取数据错误",
							duration: 2000
						});
					}
				});
			},
			getLotNode: function(deviceNo) {
				getList({
					pageNum:1,
					pageSize:10,
					imei:deviceNo,
				}).then((res) => {
					if (res.code == 200) {
						if(res.data.total > 0){
							this.lotData = res.data.rows[0];
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: "获取数据错误",
							duration: 2000
						});
					}
				});
			},
			loadAlarmList: function() {
				getAlarmTaskList(this.queryForm).then((res) => {
					if (res.data.code == 200) {
						this.responAlarmTaskList = res.data.rows;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 2000
						});
						this.responAlarmTaskList = [];
					}
				});
			},
			//跳转处理页面
			goAlarm: function(id) {
				uni.navigateTo({
					url: '/pages/alarmTask/alarmDetail?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F2F6FF;
		padding-top: 16upx;
	}
	.rowTitle{
		display: flex;
		flex-direction: row;
		padding: 20rpx 20rpx 0rpx 20rpx;
		.text{
			font-size: 32rpx;
			color: #333333;
			margin-left: 20rpx;
		}
	}

	.device-view {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		width: 96%;
		margin: auto;
		text-align: center;
		margin-bottom: 20px;
		.alarm-view-item {
			padding: 10px;
			background-color: #FFFFFF;
			width: 97%;
			height: auto;
			margin-left: 1.5%;
			margin-top: 10px;
			border-radius: 20rpx;
			font-size: 28upx;
			text-align: left;
			.rowContent{
				padding-bottom: 10rpx;
			}
			
			.alarm-view-item-t {
				display: flex;
				justify-content: space-between;
				padding-bottom: 5px;
				// border-bottom: 1px solid rgba($color: #409eff, $alpha: 0.5);
			}

			.alarm-view-item-c {
				.item-c-i-t {
					margin-top: 10px;
				}

				.item-c-bm-t {
					display: flex;
					margin-left: 15px;
					margin-bottom: 20px;
					justify-content: space-between;
					align-items: left;
					color: #333333;
					font-size: 28upx;
				}
			}
		}
	}
</style>
